<template lang="pug">
.dashboard-police-wrapper
  .dashboard-policeFilter(
    v-for="(item, index) of policeFlag"
    :key="index"
    @click="changeFilterPoliceList(item)"
    :class="item.label|policeClass(filterPoliceList)")
      span {{ policeList[item.label] }}
</template>

<script>
export default {
  name: 'dashboard-stat',
  props: {
    filterPoliceList: Array,
    policeFlag: Array
  },
  data () {
    return {
      // 报警框relation
      policeList: {
        DANGER: '红色报警',
        WARNING: '黄色预警',
        COMPLETE: '蓝色关注',
        NORMAL: '绿色正常'
      }
    }
  },
  filters: {
    policeClass: (data, filterPoliceList) => {
      return [{
        active: filterPoliceList.includes(data)
      }, data.toLowerCase()]
    }
  },
  methods: {
    changeFilterPoliceList (policeFlag) {
      this.$emit('dashboardMapPolice', policeFlag)
    }
  }
}
</script>

<style lang="sass" scoped>
.dashboard-police-wrapper
  display: flex
  height: 36px
  border-radius: 5px
  background-color: #fff
  border: 1px solid #c9ccd1
  box-shadow: 1px 1px 5px #c9ccd1
  .dashboard-policeFilter
    flex: 1
    width: 100px
    padding: 9px 0
    text-align: center
    line-height: 18px
    cursor: pointer
    color: #555
    span
      display: block
      border-right: 1px solid #e6e6e6
    &.active
      line-height: 36px
      padding: 0
      .active:last-child
        border-right: none
      &.danger
        background-color: #e36262
        color: #fff
      &.warning
        background-color: #f2a538
        color: #fff
      &.normal
        background-color: #53964d
        color: #fff
      &.complete
        background-color: #4080db
        color: #fff
    &.dashboard-policeFilter:first-child
      border-top-left-radius: 5px
      border-bottom-left-radius: 5px
    &.dashboard-policeFilter:last-child
      border-top-right-radius: 5px
      border-bottom-right-radius: 5px
      span
        border-right: 0
</style>
